Date / Time pickers

可以透過官方文件知道有兩種做法，一種是利用原生 input type = "date", "time", "datetime" 的屬性，直接下在 TextField 組件裡面，作法就和前面的章節提及的一致。

<TextField
  id="date"
  label="Birthday"
  type="date"
  defaultValue="2017-05-24"
  InputLabelProps={{
  shrink: true,
  }}
/>
<TextField
  id="datetime-local"
  label="Next appointment"
  type="datetime-local"
  defaultValue="2017-05-24T10:30"
  InputLabelProps={{
    shrink: true,
  }}
/>
<TextField
  id="time"
  label="Alarm clock"
  type="time"
  defaultValue="07:30"
  InputLabelProps={{
    shrink: true,
  }}
  inputProps={{
    step: 300, // 5 分鐘一個tick
  }}
/>

另一種則需要導入@material-ui/pickers的套件，詳細可以透過官方文件查詢，首先先安裝此套件：

npm i @material-ui/pickers
yarn add @material-ui/pickers

再來需要用到時間管理的套件，可以選擇自己喜歡的就行，官方文件有提供以下四種：

npm i @date-io/date-fns@1.x date-fns
// or
npm i @date-io/moment@1.x moment
// or
npm i -s @date-io/luxon@1.x luxon
// or
npm i -s @date-io/dayjs@1.x dayjs

主要是因為他會用到基於 React Context，概念的 custom provider:

import {
  MuiPickersUtilsProvider,
  DatePicker,
  TimePicker,
  DateTimePicker,
} from '@material-ui/pickers';

// pick a date util library
import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
      <TimePicker value={selectedDate} onChange={handleDateChange} />
      <DateTimePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Date picker

透過 autoOk，可以將確認按鈕收起來，format 則是修改顯示的格式，KeyboardDatePicker的話在欄位中會多出一個icon button，其餘的應用詳見該官網。

import React, { Fragment, useState } from "react";
import { DatePicker, KeyboardDatePicker } from "@material-ui/pickers";

function BasicDatePicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />

      <DatePicker
        autoOk
        label="Clearable"
        clearable
        disableFuture
        value={selectedDate}
        onChange={handleDateChange}
      />

      <DatePicker
        disableFuture
        openTo="year"
        format="dd/MM/yyyy"
        label="Date of birth"
        views={["year", "month", "date"]}
        value={selectedDate}
        onChange={handleDateChange}
      />
      <KeyboardDatePicker
        clearable
        value={selectedDate}
        placeholder="10/10/2018"
        onChange={date => handleDateChange(date)}
        minDate={new Date()}
        format="MM/dd/yyyy"
      />
    </Fragment>
  );
}

export default BasicDatePicker;

Time Picker

時間的話會多出一個時鐘的選擇框，那麼他則可以針對不同小時制去做更改，step則可以限定他分針跳動時候的最小單位，其餘應用的部分我也放在這裡

import React, { Fragment, useState } from "react";
import { TimePicker } from "@material-ui/pickers";

function BasicTimePicker() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <TimePicker autoOk label="12 hours" value={selectedDate} onChange={handleDateChange} />

      <TimePicker
        clearable
        ampm={false}
        label="24 hours"
        value={selectedDate}
        onChange={handleDateChange}
      />

      <TimePicker
        showTodayButton
        todayLabel="now"
        label="Step = 5"
        value={selectedDate}
        minutesStep={5}
        onChange={handleDateChange}
      />
    </Fragment>
  );
}

export default BasicTimePicker;

Date Time Picker

這個部分則為上述兩者的綜合體，這裡我就不再多加描述了，詳細應用請至這裏查詢細節應用。

<DateTimePicker
    label="DateTimePicker"
    inputVariant="outlined"
    value={selectedDate}
    onChange={handleDateChange}
  />

  <DateTimePicker
    autoOk
    ampm={false}
    disableFuture
    value={selectedDate}
    onChange={handleDateChange}
    label="24h clock"
  />

  <DateTimePicker
    value={selectedDate}
    disablePast
    onChange={handleDateChange}
    label="With Today Button"
    showTodayButton
  />

那麼今天的內容就先到這裡，明天會接續講解 Select 組件的部分。